<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>登录</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script> 
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript">
	$(window).load(function(){
		$(".loading").addClass("loader-chanage")
		$(".loading").fadeOut(300)
	})
</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<form>
		<div class="login clearfloat box-s">
			<h3>会员登录</h3>
			<div class="list clearfloat">
				<ul>
					<li class="ra3">
						<p class="fl clearfloat">
							<span class="opa5"></span>
							<i class="iconfont icon-yonghuming"></i>
						</p>
						<div class="nr clearfloat fl">
							<span class="opa3"></span>
							<input type="text" name="username" id="username" value="" placeholder="用户姓名" />
						</div>
					</li>
					<li class="ra3">
						<p class="fl clearfloat">
							<span class="opa5"></span>
							<i class="iconfont icon-mima"></i>
						</p>
						<div class="nr clearfloat fl">
							<span class="opa3"></span>
							<input type="password" name="password" id="password" value="" placeholder="登录密码" />
						</div>
					</li>
					<!-- <li class="ra3">
						<p class="fl clearfloat">
							<span class="opa5"></span>
							<i class="iconfont icon-yanzhengma"></i>
						</p>
						<div class="nr nrtwo clearfloat fl">
							<span class="opa3"></span>
							<input type="text" name="" id="" value="" placeholder="验证码" />
							<samp class="db fr">0212</samp>
						</div> -->
					</li>
				</ul>
			</div>
			<div class="mima clearfloat">
				<ul>
					<li class="fl">
						<div class="xuan clearfloat fl">
		    				<div class="radiofour" > 
							    <label>
							        <input type="checkbox" name="" value="" />
							        <div class="option"></div>
							        <span class="opt-text">记住密码</span>
							    </label>
							</div>
		    			</div>
					</li>
					<li class="fr">
						<a href="verification.html">找回密码？</a>
					</li>
				</ul>
			</div>
			<div class="login-btn">
				
								<a href="javascript:void(0)" id="loginBtn">
									登录
								</a>
				<a href="register.html" class="btn">
					<span class="opa5"></span>
					<samp>注册</samp>
				</a>
			</div>
		</div>
		</form>
		<script type="text/javascript">
			
			var username=localStorage.getItem('username');
			if(username !=null){
				location.replace("center.html");
			}
			
			var loginUrl=baseUrl+ "/zuul-user/users/login"
			// var loginUrl="../users/login"
		
			$(function(){ // 页面就绪事件
				$("#username").bind("input",function(){
					checkLength("username",6,12);
				});
		
				// 为密码输入框添加失去焦点事件
				$("#password").blur(function(){
					checkEmpty("password","密码不能为空");
				});
		
				// 为用户名输入框添加失去焦点事件
				$("#username").blur(function(){
					if(!checkEmpty("username","用户名不能为空")) {
						return;
					}
					if(!checkLength("username",6,12)) {
						return;
					}
					// 勾选自动登录
					// 获取浏览器保存的autoLogin的Cookie
					var cookie=$.cookie("autoLogin");
					// alert(cookie);
					if(cookie!=null) {
						// 获取该Cookie的value中保存的用户名
						var cUsername = cookie.split("_#_")[0];
						// 判断与当前用户名是否一致
						if (cUsername == $("#username").val()) {
							// 是：将自动登录设为勾选状态
							$("#auto")[0].checked = true;
						}else{
							$("#auto")[0].checked = false;
						}
					}
				});
		
				// 为提交按钮添加点击事件
				$("#loginBtn").click(function(){
					// 获取表单数据
					var username=$("#username").val();
					var pwd=$("#password").val();
					
					// 判断页面中的input是否都是验证成功的状态
					// var divArr=$("div.has-success");
					// if(divArr.length!=2){ // 存在异常项
					// 	return;
					// }
		
					// 提交表单
					var params={
						username:username,
						password:pwd
					}
					// 查看是否勾选自动登录
					// if($("#auto")[0].checked){
					// 	// 请求参数中添加 checked=true
					// 	params.checked=true;
					// }
	
					// 发送AJAX请求
					
					$.post(loginUrl,params,function(result){
						// 处理响应数据
						if(result.state==1000){ // 正常响应
							// alert("登录成功，点击跳转首页");
						
							localStorage.setItem("username", username);
							localStorage.setItem("uid", result.data.uid);
							
							// 将头像路径添加到cookie中,{"expires":7 单位是天}
							//$.cookie("avatar",result.data.avatar,{"expires":7});
							// 跳转登录页面
							location.replace("xuzhi.html");
						}else{ // 异常响应
							alert(result.msg);
						}
					});
				});
			});
		
			function checkLength(name,minLength,maxLength){
				if($("#"+name).val().length<minLength){ // 小于长度
					$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text("长度不能小于"+minLength);
					return false;
				}else if($("#"+name).val().length>maxLength){
					$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text("长度不能大于"+maxLength);
					return false;
				}else{ // 长度合适
					$("#"+name).parents(".form-group").removeClass("has-error").addClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text("");
					return true;
				}
			}
		
			function checkEmpty(name,msg){
				if($("#"+name).val()==""){ // 为空
					$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text(msg);
					return false;
				}else{ // 不为空
					$("#"+name).parents(".form-group").removeClass("has-error").addClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text("");
					return true;
				}
			}
		</script>
	</body>
</html>
